<template>
  <div class="Big_box">
    <NavBar></NavBar>
   <!-- 大图 -->
    <div class="map">
      <img class="img" src="@/assets/hero-landing.png" alt="">
    </div>
    <!-- 团队介绍 -->
    <div>
      <div class="team">
      <span>技术团队介绍</span>
    </div>
    <div class="content">
      <div class="content_one"><span class="colour">ZDZCHL是黑马程序员71期优秀的前端研发团队</span>，我们掌握<span class="colour">最前沿</span>的前端技术开发，
        为的就是把网站的界面更好地呈现给用户， <br> 旨在重塑服务和需求客户如何有效的提高经济效益
    </div>
    <div class="content_two">我们拥有黑马程序员前端最可靠的精英技术团队，也是我们ZDZCHL与前端不可分割的一部分，
      自从成立团队以来，我们通过 <span class="colour">丰富的前端开发经验</span>， <br> 开发出一些极具难度的项目，例如：<span class="colour"> 黑马头条，
      人资中台，以及现在市场最火爆的房产项目</span>，都出自于我们这个团队；如此丰富的前端行业经验 <br> 为我们提供了对市场、
      业务状况和客户需求的 <span class="colour">独特见解</span> 
    </div>
    </div>
    </div>
    <!-- 重点 -->
    <div class="why">为什么要选择蓝湖房产</div>
    <div class="box">
      <!-- 左边 -->
      <div class="keys">
        <a>
        <div class="keys_item" @mouseenter="Nows1" :class="num===1?'active':''" @click="one">
          <div class="item_left">
            <i class="iconfont icon-shezhi1"></i>
          </div>
          <div class="item_right">
            <span>我们行业面临的挑战</span>
          </div>
        </div>
        </a>
        <a>
        <div class="keys_item" @mouseenter="Nows2" :class="num===2?'active':''" @click="two">
          <div class="item_left">
            <i class="iconfont icon-gongjianba"></i>
          </div>
          <div class="item_right">
            <span>我们的解决方案</span>
          </div>
        </div>
        </a>
        <a>
        <div class="keys_item" @mouseenter="Nows3" :class="num===3?'active':''" @click="three">
          <div class="item_left">
            <i class="iconfont icon-shujumofang"></i>
          </div>
          <div class="item_right">
            <span>我们的数据洞察力和技术</span>
          </div>
        </div>
        </a>
        <a>
        <div class="keys_item" @mouseenter="Nows4" :class="num===4?'active':''" @click="four">
          <div class="item_left">
            <i class="iconfont icon-shiyan"></i>
          </div>
          <div class="item_right">
            <span>我们的优势有利于成功</span>
          </div>
        </div>
        </a>
      </div>
      <!-- 右边 -->
      <div class="right" v-if="num===1">
        <div class="right_top">
          <div class="icon">
            <i class="iconfont icon-shezhi1"></i>
          </div>
          <div class="title">
            <span>我们行业面临的挑战</span>
          </div>
        </div>
        <div class="List">
          <ul>
            <li>●中国庞大的住房市场，住房交易和服务效率低下。</li>
            <li>●没有针对房屋卖家的独家参与的行业框架。</li>
            <li>●分散的市场信息和资源。</li>
            <li>●缺乏有经验和任期的专业代理人。</li>
          </ul>
        </div>
      </div>
      <div class="right" v-if="num===2">
        <div class="right_top">
          <div class="icon">
            <i class="iconfont icon-gongjianba"></i>
          </div>
          <div class="title">
            <span>我们的解决方案——代理合作网络及其他</span>
          </div>
        </div>
        <div class="List">
          <ul>
            <li>●我们的操作系统代理合作网络 (ACN) 支撑着我们重新定义行业参与者之间关系的基础架构。</li>
            <li>●ACN 一直在改变中国的房地产交易和服务行业。</li>
            <li>●利用 ACN 的原则，我们建立了提升行业竞争环境的核心竞争力。</li>
            <li>●通过 ACN 推动的集体努力，可以有效匹配不同地点的住房客户。</li>
            <li>●在ACN成功的基础上，我们将链家的核心竞争力横向延伸到北客平台。</li>
          </ul>
        </div>
      </div>
      <div class="right" v-if="num===3">
        <div class="right_top">
          <div class="icon">
            <i class="iconfont icon-shujumofang"></i>
          </div>
          <div class="title">
            <span>我们的数据洞察力和技术</span>
          </div>
        </div>
        <div class="List">
          <ul>
            <li>●我们平台上从我们多年的前端经验和线下运营中获得的独特数据的广泛聚合为我们提供了对整个住房交易和服务价值链的无与伦比的洞察力。</li>
            <li>●专有算法优化产品和解决方案，指导高效运营并为我们平台上的服务提供商开发本地市场洞察力。</li>
            <li>●利用 ACN 的原则，我们建立了提升行业竞争环境的核心竞争力。</li>
            <li>●我们利用虚拟现实、人工智能、大数据和物联网等新技术来创建和开发现实生活中的用例和应用程序，以提升客户体验和服务效率。</li>
          </ul>
        </div>
      </div>
      <div class="right" v-if="num===4">
         <div class="right_top">
          <div class="icon">
            <i class="iconfont icon-shiyan"></i>
          </div>
          <div class="title">
            <span>我们的优势有利于成功</span>
          </div>
        </div>
        <div class="List">
          <ul>
            <li>●最成熟的前端技术和服务线上线下一体化平台</li>
            <li>●率先了解房产的独特需求，制定应对各种需求用户群体，高效快速的解决客户困扰</li>
            <li>●具有显着网络效应的强大平台，为生态系统服务。</li>
            <li>●具有远见卓识的技术团队，具有良好的创新和执行记录。</li>
          </ul>
        </div>
      </div>

    </div>
    <!-- 任务 -->
    <div class="task">
      <div class="task_top">
        <span class="NAIS">我们的任务</span><br>
      </div>
       <span class="life">优质服务，快乐生活</span>
       <p class="content">
         我们创立团队的信念是，我们可以通过提高服务提供商的质量和效率以及增强客户体验来改变中国的住房交易和服务行业。<br>
         通过利用我们的人员、数据洞察力、技术和平台，我们在追求我们的使命时保持着兴奋和长远的眼光。
       </p>
    </div>
    <!-- 里程碑 -->
    <div class="milepost">
      <div class="milepost_top">里程碑</div>
      <div class="bottom">
      <div class="milepost_item">
        <span class="item_name">1/10-1/19</span>
      </div>
        <div class="text">
          <span>人资中台</span>
          <p>打造一流公司管理平台，流程明确，全方面提高工作效益</p>
        </div>
      <div class="milepost_item">
        <span class="item_name">1/21-2/19</span>
      </div>
       <div class="text">
          <span>黑马头条</span>
          <p>ZDZCHL团队第一个前端项目，现在作为教学重点内容，重点培养学生的开发项目能力有着重大的意义</p>
        </div>
      <div class="milepost_item">
        <span class="item_name">2/24-2/28</span>
      </div>
      <div class="text1">
          <span>黑马优购</span>
          <p>作为津安创意园深受欢迎网购零售小程序，拥有一整栋楼的注册用户，每天都有大量固定访客</p>
        </div>
      <div class="milepost_item">
        <span class="item_name">3/2-3/7</span>
      </div>
      <div class="text2">
          <span>蓝湖房产</span>
          <p>扩展现有的房产平台，以覆盖广泛的住宅房地产生态系统，并为我们的平台参与者提供信息、服务和解决方案</p>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
export default {
  data(){
    return{
      num:1
    }
  },
  methods:{
   one(){
     this.num=1
   },
   two(){
     this.num=2
   },
   three(){
     this.num=3
   },
   four(){
     this.num=4
   },
   Nows1(){
     console.log(1);
     this.num=1
   },
   Nows2(){
     console.log(1);
     this.num=2
   },
   Nows3(){
     console.log(1);
     this.num=3
   },
   Nows4(){
     console.log(1);
     this.num=4
   }
  }
};
</script>

<style lang="scss" scoped>
.why{
  height: 44px;
  width: 100%;
  text-align: center;
   line-height: 44px;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 30px;
}
.map{
  width: 100%;
  margin-top: 5px;
}
.img{
  width: 100%;
  height: 450px;
  overflow: hidden;
  background-size:cover;
  background-position: center;
}
.team{
  margin-top: 20px;
  text-align: center;
  width: 100%;
  font-size: 80px;
}
.team span{
  margin: 0 auto;
  display: block;
}
.content_one{
  line-height: 30px;
  font-size: 18px;
  text-align: center;
  margin: 0 auto;
  margin-top: 40px;
}
.content_two{
  margin-top: 20px;
  line-height: 30px;
  text-align: center;
  font-size: 18px;
  margin-bottom: 50px;
  border-bottom: 1px solid rgb(221, 218, 218);
  padding: 0 30px;
}
.box{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 450px;
}
.keys{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 650px;
  height: 450px;
}
.keys_item{
  display: flex;
  width: 620px;
  height: 105px;
}
.keys_item:hover{
  box-shadow: 3px 2px 5px 2px #ccc;
  transition-duration:0.5s;
}
.item_left{
  flex: 1;
    display: flex;
  align-items: center;
  justify-content: center;
}
.iconfont{
  font-size: 70px;
  color: aqua;
}
.item_right{
    flex: 3;
}
.right{
  flex: 1;
  border: 1px solid #ccc;
}
.item_right{
  position: relative;
  display: flex;
  align-items: center;
  font-size: 30px;
  font-weight: 700;
}
.item_right::after{
  position:absolute;
  content: ">";
  right: 10px;
  color: aqua;
  
}
.right .right_top{
  display: flex;
  width: 100%;
  height: 100px;
}
.right_top .icon{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.right_top .icon .iconfont{
  font-size: 40px;
}
.right_top .title{
  flex: 3;
}
.title{
  display: flex;
  align-items: center;
   font-size: 20px;
   font-weight: 700;
   padding-left: 15px;
}
.List ul{
  margin-top: 20px;
  margin-left: 120px;
}
.List ul li{
  margin-top: 18px;
}
.task{
  margin-top: 15px;
  text-align: center;
  width: 100%;
}
.active{
  background-color: #0072fa;
  color: #fff;
}
.colour{
  color: red;
  font-weight: 700;
}
.task .life{
  display: block;
  font-size: 18px;
}
.task_top .NAIS{
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 36px;
  font-weight: 700;
}
.task .content{
  margin-top: 20px;
  height: 104px;
  font-size: 20px;
}
.milepost{
  height: 327px;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
}
.milepost_item{
  position: relative;
  margin-top: 50px;
  width: 300px;
  height: 100px;
  background-color: #005ac5;
  clip-path: polygon(77% 24%, 100% 50%, 75% 79%, 7% 79%, 25% 50%, 5% 25%);
}
.milepost_item span{
  position: absolute;
  left: 106px;
  top: 40px;
  font-size: 20px;
}
.milepost .bottom{
  position: absolute;
  display: flex;
  justify-content:space-evenly;
  width: 100%;
  height: 227px;
}
.bottom .text{
  position: absolute;
  left: 44px;
  top: 150px;
  height: 100px;
  width: 290px;
}
.text span{
  display: block;
  height: 26px;
  text-align: left;
  font-size: 20px;
}
.text p{
  margin-top: 10px;
  font-size: 16px;
  line-height: 20px;
}
.bottom .text:nth-child(2){
  left: 378px;
  top: 150px;
}
.bottom .text1{
  position: absolute;
  left: 710px;
  top: 150px;
  height: 100px;
  width: 290px;
}
.text1 span{
  display: block;
  height: 26px;
  text-align: left;
  font-size: 20px;
}
.text1 p{
    margin-top: 10px;
  font-size: 16px;
  line-height: 20px;
}
.bottom .text2{
  position: absolute;
  left: 1040px;
  top: 150px;
  height: 100px;
  width: 290px;
}
.text2 span{
  display: block;
  height: 26px;
  text-align: left;
  font-size: 20px;
}
.text2 p{
    margin-top: 10px;
  font-size: 16px;
  line-height: 20px;
}
</style>
